import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { PromptSuggestionBasic } from "./prompt-suggestion-basic"
import { PromptSuggestionHighlight } from "./prompt-suggestion-highlight"
import { PromptSuggestionVariants } from "./prompt-suggestion-variants"

export const metadata = generateMetadata(
  "Prompt Suggestion",
  "A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode and Highlight Mode."
)

# Prompt Suggestion

A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes:

- **Normal Mode**: Renders clickable, pill-shaped buttons ideal for suggesting quick prompts in chat interfaces
- **Highlight Mode**: Provides text highlighting to highlight a part of the suggestion

## Examples

### Basic Usage

Display clickable prompt suggestions that users can select to populate an input field. You can easily use it with the [PromptInput](/docs/prompt-input) component.

<ComponentCodePreview
  component={<PromptSuggestionBasic />}
  filePath="app/docs/prompt-suggestion/prompt-suggestion-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Highlighted Prompt Suggestions

Implement prompt suggestions with search term highlighting. It's perfect to showcase a list of related prompts.

<ComponentCodePreview
  component={<PromptSuggestionHighlight />}
  filePath="app/docs/prompt-suggestion/prompt-suggestion-highlight.tsx"
  classNameComponentContainer="p-8"
/>

### Complete Chat Interface

Build a full-featured chat interface with dynamic prompt suggestions that switch between both modes.

<ComponentCodePreview
  component={<PromptSuggestionVariants />}
  filePath="app/docs/prompt-suggestion/prompt-suggestion-variants.tsx"
  classNameComponentContainer="p-8 h-[500px]"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/prompt-suggestion.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock
  filePath="components/prompt-kit/prompt-suggestion.tsx"
  language="tsx"
/>

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### PromptSuggestion

| Prop      | Type                                               | Default   | Description                                                                    |
| :-------- | :------------------------------------------------- | :-------- | :----------------------------------------------------------------------------- |
| children  | React.ReactNode                                    |           | Content to display in the suggestion button                                    |
| variant   | "default" \| "destructive" \| "outline" \| "ghost" | "outline" | Visual variant of the button (normal mode) or "ghost" (highlight mode)         |
| size      | "default" \| "sm" \| "lg" \| "icon"                | "lg"      | Size of the button (normal mode) or "sm" (highlight mode)                      |
| highlight | string                                             | undefined | When provided, enables highlight mode and highlights this text within children |
| className | string                                             |           | Additional CSS classes                                                         |
| ...props  | ButtonHTMLAttributes                               |           | All other button HTML attributes (including onClick)                           |
